<template>
<div class="courselist">
  <div class="courselistH">
    <h2>免费课程</h2>
    <p> 更多 <i class="el-icon-arrow-right"></i></p>
  </div>
   <div class="course-list" >
     <div id="add">
       <div  @click="gototwolay(item.courseId)"  v-for="(item,index) in courselist" :key="index">
         <ul class="ul1">
           <li>
             <div>
               <img :src="item.bannerFileUrl" alt="" title="" />
             </div>
           </li>
           <li>{{item.courseSubtitle}}</li>
           <li>
             共 {{item.learningNum}} 节课 | {{item.participationsCount}} 人报名
           </li>
           <li class="li1">免费</li>
         </ul>
       </div>
     </div>
   </div>
  <div class="courselistH">
    <h2>精品课程</h2>
    <p> 更多 <i class="el-icon-arrow-right"></i></p>
  </div>
  <div class="course-list" >
    <div id="add">
      <div @click="gototwolay(item.courseId)"  v-for="(item,index) in boutique" :key="index">
        <ul class="ul1">
          <li>
            <div>
              <img :src="item.bannerFileUrl" alt="" title="" />
            </div>
          </li>
          <li>{{item.courseTitle}}</li>
          <li>共 {{item.courseId}} 节课 | {{item.learningNum}} 人报名</li>
          <li class="li2">
            <span>{{item.discountPrice}}</span> <span>￥800</span>
            <div class="time">{{item.discountDesc}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="courselistH">
    <h2>限时折扣课程</h2>
    <p> 更多 <i class="el-icon-arrow-right"></i></p>
  </div>
  <div class="course-list" >
    <div id="add">
      <div @click="gototwolay(item.courseId)"  v-for="(item,index) in boutique" :key="index">
        <ul class="ul1">
          <li>
            <div>
              <img :src="item.bannerFileUrl" alt="" title="" />
            </div>
          </li>
          <li>{{item.courseTitle}}</li>
          <li>共 {{item.courseId}} 节课 | {{item.learningNum}} 人报名</li>
          <li class="li2">
            <span>{{item.discountPrice}}</span> <span>￥800</span>
            <div class="time">{{item.discountDesc}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="courselistH">
    <h2>头条精选</h2>
    <p> 更多 <i class="el-icon-arrow-right"></i></p>
  </div>
  <div class="course-list" >
    <div id="add">
      <div v-for="(item,index) in courselistto" :key="index">
        <ul class="ul1">
          <li>
            <div>
              <img :src="item.coverImgUrl" alt="" title="" />
            </div>
          </li>
          <li class="liTitle">{{item.title}}</li>
        </ul>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
import {courselist, courselistto} from "@/api/index-api";

export default {
  name: "courselist",
  data(){
    return{
      courselist:[],
      boutique:[],
      courselistto:[]
    }
  },
  created: function () {
    courselist("free", 1, 10).then(res => {
      // console.log(res)
      this.courselist = res.rows
      this.$store.commit('skipdate',{vuexskipdate:res.rows})
    })
    courselist("boutique", 1, 5).then(res => {
      // console.log(res)
      this.boutique = res.rows
      this.$store.commit('boutiqu',{vuexBoutiqueSkipDate:res.rows})
    })
    courselist("discount", 1, 5).then(res => {
      // console.log(res)
      this.boutiquetwo = res.rows

    })
    courselistto().then(res=>{
      console.log(res)
     this.courselistto= res.rows.slice(0,5)
    })

  },
  methods:{
    gototwolay(data){
    this.$router.push({path:"/TwoLay?isID="+`${data}`})
    this.$store.commit('skipid',{vuexskipid:data})
    }
  }

}
</script>

<style scoped lang="less">
.courselistH{
  border-bottom: 1px solid darkgray;
  position: relative;
  display: flex;
  h2{
    margin: 40px auto;
    text-align: center
  }
  p{
    position: absolute;
    right: 20px;
    top: 50px;
  }
}
.course-list{
  width: 100%;
  ul {
    list-style: none;
  }
  #add {
    margin: 2% auto;
    display: flex;
    flex-wrap: wrap;
  }
  #add >div {
    width: 20%;
    font-size: 14px;
  }
  .ul1 > li > div {
    width: 225px !important;
    height: 130px;
    overflow: hidden;
  }
  .ul1 > li > div img {
    width: 240px;
    height: 130px;
    transition: 0.5s;
  }
  li {
    margin-top: 5px;
  }
  .li1 {
    color: red;
  }
  img:hover {
    transform: scale(1.1);
  }
  .li2 {
    color: red;
  }
  .li2 span:nth-of-type(2) {
    color: teal;
    text-decoration: line-through;
  }
  .li2 .time {
    height: 30px;
    width: 75px !important;
    background-color: #fff7e6;
    float: right;
    text-align: center;
    margin-right: 10px;
    line-height: 30px;
  }
}
.liTitle{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

</style>